<template>
  <el-card class="box-card">
    <itable
    :table="tconfig.tableConfig"
    :tableData="tconfig.tableData"
    :page-bean="tconfig.pageBean"
    @pageChange="pageChange"
    @handleInfo="handleInfo"
    >
      <template #searchBox>
        <Eform
          :model="form"
          :elem="fromData"
          :submit="true"
          :reset="true"
          :button="false"
          okIcon="Search"
          btnSize="default"
          submitText="搜索"
          @onSuccess="onSuccess"
          @onReset="onReset"
          >
        </Eform>
      </template>
      <template #stated="prop">
        <span>{{ fileType(prop.obj.row.stated, prop.obj.row.overdue) }}</span>
      </template>
      <template #overdue="prop">
        <span>{{ prop.obj.row.overdue == 0 ? '否' : '是'}}</span>
      </template>
      <template #headerbtn>
        <el-button type="primary" plain @click="chilkExport" icon="Download">导出</el-button>
      </template>
    </itable>

    <el-drawer
    title="查看"
    v-model="dialogVisible"
    size="30%">
      <el-descriptions :column="1">
        <template v-for="(item, index) in info" :key="index" >
          <el-descriptions-item :label="item.label" v-if="item.label&&!item.template">{{ filtval(item.value) }} {{ item.value?.phone }} </el-descriptions-item>
          <el-descriptions-item v-else-if="!item.template">{{ item.value }}</el-descriptions-item>
          <el-descriptions-item v-if="item.template">
            <el-image style="width: 80px; height: 80px; margin-right: 10px;" :preview-src-list="item.value" :initial-index="i" v-for="(url, i) in item.value" :key="i" :src="url"/>
          </el-descriptions-item>
        </template>
    </el-descriptions>
  </el-drawer>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { PageBean } from "@/utils/page-bean";
import itable from '@/components/table/table.vue'
import Eform from '@/components/eform/index.vue';
import useCurrentInstance from '@/utils/useCurrentInstance'

const { proxy } = useCurrentInstance()
let dialogVisible = ref(false)
let option = [
      {label: '通过检查', value: 20},
      {label: '存在隐患', value: 30},
      {label: '隐患已分配', value: 31},
      {label: '隐患需要重新提交', value: 32},
      {label: '已整改待验收', value: 33},
      {label: '已验收', value: 40},
    ]
let fromData = reactive([
  {
    label: "排查项目",
    prop: "content",
    clearable: true,
    style:{paddingBottom:'10px'}
  },
  {
    label: "隐患发现人姓名",
    prop: "staff",
    labelWidth:'150px',
    clearable: true,
  },
  {
    label: "隐患整改人姓名",
    prop: "executor",
    labelWidth:'150px',
    clearable: true,
  },
  {
    label: "隐患治理状态",
    prop: "stated",
    element:'select',
    labelWidth:'110px',
    clearable: true,
    option:option
  },
  {
    label: "验收人",
    prop: "acceptance",
    clearable: true,
  },
  {
    label: "提报时间",
    prop: "time",
    element:'date',
    type:"monthrange",
    format:'YYYY-MM',
    clearable: true,
  },
])

let form = reactive({
  content:'',
  staff:'',
  executor:'',
  time:'',
  stated:'',
  date:'',
  page:1,
  size:10,
})
let info = reactive([
  {label:'排查项目:', value:'', prop:'content'},
  {label:'', value:'按照相关规定设置安全管理机构或配各安全管理人员', prop:'remark'},
  {label:'提报时间:', value:'', prop:'created_at'},
  {label:'当前状态:', value:'', prop:'stated'},
  {label:'隐患排查人:', value:'', phone:'', prop:'staff'},
  {label:'具体位置:', value:'', prop:'place'},
  {label:'隐患详情内容:', value:'', prop:'hidden_danger'},
  {label:'', value:'按照相关规定设置安全管理机构或配各安全管理人员', prop:'remark'},
  {label:'',value:[],template:'img',prop:'files'},
  {label:'验收人信息:', value:'', phone:'', prop:'assign'},
  {label:'整改人信息:', value:'', phone:'',prop:'executor'},
  {label:'整改内容:', value:'',prop:'fix-explain'},
  {label:'整改时间:', value:'',prop:'repair_at'},
  {label:'',value:[],template:'img',prop:'fix-files'},
  // {label:'提交人:', value:'',prop:'staff-name'},
  {label:'验收时间:', value:'',prop:'acceptance_at'},

])
const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [{currenttime:'1',costtime:'2',onreason:'3',watermeter:'true'}] as any[],
  pageBean: new PageBean(10, 1, 0),
})

// 重置
const onReset = () => {
  tconfig.pageBean.pageIndex = 1
  form.date = ''
  getRecordBugs()
}
// 搜索
const onSuccess = () => {
  tconfig.pageBean.pageIndex = 1
  form.date = form.time ? form.time.join() : ''
  getRecordBugs()
}

// 导出
const chilkExport = () => {
  proxy.$api.getRecordExport(form).then(res => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel'});
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, 'test')
    } else {
        const href = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = href
        a.download = proxy.$moment().format('YYYY年MM月DD日')+' 隐患台账'
        a.click()
        URL.revokeObjectURL(a.href)
    }
  })
}

// 表格-查看
const handleInfo = (a, b, id) => {
  getRecordDetails(b.id)
  dialogVisible.value = true
}
// 分页
const pageChange = () => {
  getRecordBugs()
}
// 台账列表
const getRecordBugs = () => {
  tconfig.tableConfig.loading = true
  form.page = tconfig.pageBean.pageIndex
  proxy.$api.getRecordBugs(form).then(res => {
    tconfig.tableData = res.result.lists
    tconfig.pageBean.Total = res.result.total_rows
    tconfig.tableConfig.loading = false
  }).catch(err => {tconfig.tableConfig.loading = false})
}
// 台账详情
const getRecordDetails = (id) => {
   proxy.$api.getRecordDetails({id}).then(res => {
    info.map(item => {
      if(item.phone !== undefined){
        item.value = res.result[item.prop].name
        item.phone = res.result[item.prop].phone
      }else{
        if(item.prop == 'stated'){
          item.value = fileType(res.result[item.prop],res.result.overdue)??'' as string
        }else{
          if(item.prop.indexOf('-') == -1){
            item.value = res.result[item.prop]
          }else{
            item.value = res.result[item.prop.split('-')[0]][item.prop.split('-')[1]]
          }
        }
      }
    })
   })
}
getRecordBugs()

// 状态过滤
const fileType = (type,status) => {
  if(type){
    let val = '-'
    option.map(item => {
      if(item.value == type){
        val = item.label + (status == 0 ? '' : [32,33,40].includes(item.value)?' (超期整改)':'')
      }
    })
    return val
  }
}

const filtval = (val) => {
  if(Array.isArray(val)){
    return val.length == 0 ? '' : val
  }else{
    return typeof val == 'object' ? val.name : val
  }
}
// 初始化表格
const initTable = () => {
  tconfig.tableConfig = {
    loading: true,
    hasSelect: false,
    hasIndex: false,
    hasOperation: true,
    hasSearch: true,
    hasPage: true,
    headerShowBtn:true,
    sort:{ prop: 'id', order: 'descending' },
    tr: [
      {
        label: "编号",
        prop: "id",
        sortable:true
      },
      {
        label: "排查项目",
        prop: "content",
        width:'300px',
      },
      {
        label: "状态",
        prop: "stated",
        width:'170px',
        show:'template'
      },
      {
        label: "提报时间",
        prop: "created_at",
      },
      {
        label: "整改期限",
        prop: "deadline",
      },
      {
        label: "整改时间",
        prop: "repair_at",
      },
      {
        label: "是否超期整改",
        prop: "overdue",
        show: "template"
      }
    ],
    operation:{
      label:'操作',
      data:[
        { label:'查看', type:'', icon:'Search', Fun:'handleInfo', id: 0 },
      ]
    }
  }
}
initTable()
</script>

<style lang='scss' scoped>
:deep(.el-dialog__body){
.el-form>.el-form-item{
  width: 45%;
  margin-bottom: 20px;
  margin-left: 10px;
}
.el-select{
  width: 100%;
}
}
.dialog-footer{
  width: 100%;
  display: flex;
  justify-content: center;
  .el-button{
    width: 90%;
  }
}
</style>
